<template>
  <v-app>
    <v-system-bar app>
      <h2 class="text-center">这里是 v-system-bar</h2>
    </v-system-bar>

    <drawer ref="AppDrawer"></drawer>

    <!-- application 页头 -->
    <v-app-bar app class="v-bar--underline" dense elevation="0">
      <v-app-bar-nav-icon @click="toggleDrawerShow"></v-app-bar-nav-icon>
      <h2 class="text-center">这里是 v-app-bar</h2>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Vuetify最新release版</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- 主本内容 -->
    <v-main>
      <!-- <HelloWorld /> {{ Object.keys($vuetify.lang.locales) }} -->
      <!-- <router-view></router-view> -->
      <h1 class="text-center">这里是 v-main</h1>
      <br />

      <v-container grid-list-xs>
        <router-view></router-view>
      </v-container>
    </v-main>

    <!-- application 页脚 -->
    <v-footer app dense>
      <!-- -->
      <h1 class="text-center">这里是 v-footer</h1>
    </v-footer>

    <v-bottom-navigation app>
      <h2 class="text-center">这里是 v-bottom-navigation</h2>
    </v-bottom-navigation>
  </v-app>
</template>

<script>
// import HelloWorld from "./components/HelloWorld";
import drawer from "@/appcomponents/drawer.vue";

export default {
  name: "App",

  components: {
    // HelloWorld,
    drawer,
  },

  data: () => ({
    //
  }),
  methods: {
    toggleDrawerShow() {
      this.$refs.AppDrawer.isshow = !this.$refs.AppDrawer.isshow;
    },
  },
};

//
</script>
